<template>
  <div class="movable-modal-wrap" v-if="visible">
    <div class="movable-modal" ref="MovableModal" :style="{ width: typeof this.width === 'string' ? this.width : `${this.width}px` }">
      <div class="header" @mousedown="mouseDown" @mouseup="mouseUp">
        <div class="title">
          <slot name="title">{{ title }}</slot>
        </div>
      </div>
      <div class="close">
        <a-icon type="close" @click="handleCancel"/>
      </div>
      <div class="body">
        <slot></slot>
      </div>
      <div class="footer" v-if="footer !== null">
        <slot name="footer">
          <a-button @click="handleCancel">{{ cancelText }}</a-button>
          <a-button type="primary" class="btn-ok" @click="handleOk">{{ okText }}</a-button>
        </slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MovableModal',
  props: {
    title: {
      type: String,
      default: () => '',
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
    footer: {
      type: String,
      default: () => '',
    },
    width: {
      // eslint-disable-next-line vue/require-prop-type-constructor
      type: String | Number,
      default: () => null,
    },
    okText: {
      type: String,
      default: () => '确定',
    },
    cancelText: {
      type: String,
      default: () => '取消',
    },
  },
  data() {
    return {
      isDown: false,
      y: null,
      x: null,
      top: null,
      left: null,
    };
  },
  watch: {
    visible: {
      handler: function (val) {
        if (val) {
          document.getElementById('app').appendChild(this.$el);
        } else {
          document.getElementById('app').removeChild(this.$el);
        }
      },
      immediate: false,
      deep: true,
    },
  },
  mounted() {
    document.getElementById('app').appendChild(this.$el);
    // 鼠标移动
    window.onmousemove = (e) => { this.mouseMove(e); };
  },
  methods: {
    handleCancel() {
      this.$emit('cancel');
      this.$emit('update:visible', false);
    },
    handleOk() {
      this.$emit('ok');
    },
    mouseDown(e) {
      // 获取x坐标和y坐标
      this.x = e.clientX;
      this.y = e.clientY;

      // 获取左部和顶部的偏移量
      this.left = this.$refs.MovableModal.offsetLeft;
      this.top = this.$refs.MovableModal.offsetTop;
      // 开关打开
      this.isDown = true;
      // 设置样式
      this.$refs.MovableModal.style.cursor = 'move';
    },
    mouseUp() {
      if (this.isDown) {
        // 开关关闭
        this.isDown = false;
        this.$refs.MovableModal.style.cursor = 'default';
      }
    },
    mouseMove(e) {
      if (this.isDown) {
        // 获取x和y
        let nx = e.clientX;
        let ny = e.clientY;
        // 计算移动后的左偏移量和顶部的偏移量
        let nl = nx - (this.x - this.left);
        let nt = ny - (this.y - this.top);

        this.$refs.MovableModal.style.left = nl + 'px';
        this.$refs.MovableModal.style.top = nt + 'px';
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.movable-modal-wrap {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100000;
  .movable-modal {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 99999999;
    margin: auto;
    font-size: 1rem;
    color: #FFEC86;
    background: #fff;
    background-clip: padding-box;
    border: 0;
    border-radius: 0.25rem;
    box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 15%);
    pointer-events: auto;
    .header {
      padding: 1rem 1.5rem;
      color: rgba(0, 0, 0, 0.65);
      border-bottom: 0.0625rem solid #e8e8e8;
      border-radius: 0.25rem 0.25rem 0 0;
      .title {
        color: rgba(0, 0, 0, 0.85);
        font-weight: 500;
        line-height: 1.375rem;
        word-wrap: break-word;
      }
    }
    .close {
      position: absolute;
      width: 3.375rem;
      height: 3.375rem;
      top: 0;
      right: 0;
      color: rgba(0, 0, 0, 0.45);
      font-weight: 700;
      line-height: 3.375rem;
      text-align: center;
      cursor: pointer;
      :hover {
        color: rgba(0, 0, 0, 0.85);
      }
    }
    .body {
      padding: 1.5rem;
      line-height: 1.5;
      word-wrap: break-word;
    }
    .footer {
      padding: 0.625rem 1rem;
      text-align: right;
      border-top: 0.0625rem solid #e8e8e8;
      border-radius: 0 0 0.25rem 0.25rem;
      .btn-ok {
        margin-left: 0.5rem;
      }
    }
  }
}
// .movable-modal-wrap::after {
//   content: "";
//   width: 100%;
//   height: 100%;
//   position: absolute;
//   left: 0;
//   top: 0;
//   background: #1a1d20;
//   z-index: 100001;
//   filter: blur(400px);
// }
</style>
